<template>
    <div class="hotelDetail">
        <div class="flex aCenter">
            <div class="info-item">
                <el-select v-model="city" placeholder="select city" style="width: 140px">
                    <el-option-group
                        v-for="group in options"
                        :key="group.label"
                        :label="group.label"
                        >
                    <el-option
                        v-for="item in group.options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                    </el-option-group>
                </el-select>
            </div>
            <div class="info-item">
                <el-input-number   v-model="guestCount"></el-input-number>
            </div>
            <div class="info-item">
                <el-rate v-model="rateVal"></el-rate>
            </div> 
            <el-button @click="searchPrice" type="primary" style="color:#fff;border:#fff;">Search</el-button>
        </div>
        <div class="gl">
            <div>strategy</div>
            <div>
                Shanghai, the place that condensed China for nearly a hundred years, is the "magic city" of modern people.
People's Square, where three subway lines meet, has the most convenient traffic, and it saves time and worry to live here.
To experience Shanghai at night, choose to stay in the Bund or Yu Garden area.
            </div>
        </div>
        <div class="flex aCenter mt20">
            <div class="jjT flex">
                <div>
                    average price
                </div>
                <el-tooltip
                    class="box-item"
                    effect="dark"
                    placement="bottom">
                    <template #content>
                        The average price of the class is calculated from <br/>the weekday price, and the holiday price will rise.
                    </template>
                    <el-icon color="#999" style="height:20px;width:20px;"><QuestionFilled  /></el-icon>：
                </el-tooltip>
            </div>
            <div class="flex aCenter rtBox">
                <div class="hotel-rate rate3"></div>
                <div>$242</div>
            </div>
            <div class="flex aCenter rtBox">
                <div class="hotel-rate rate4"></div>
                <div>$412</div>
            </div>
            <div class="flex aCenter rtBox">
                <div class="hotel-rate rate5"></div>
                <div>$672</div>
            </div>
        </div>
        <div class="travelList mt20">
            <div v-for="(item,index) in travelList" class="pRelative flex travelBox" @click="jumpPathDetail(index)" :key="index">
                <img :src="item.img" class="mrBox" alt=""/>
                <div>
                    <div class="title">{{ item.title }}</div>
                    <div class="chinaT">{{item.chinaT}}</div>
                    <div class="radiusB">
                        <div class="rating rating2">
                            <em>8.8</em>
                            <br>
                            <strong>great</strong>
                        </div>
                    </div>
                    <!-- <div class="desc">{{ item.desc }}</div>     -->
                    <div class="flex aCenter address">
                        <el-icon color="#54BFEC" style="width:20px;height:20px;"><LocationFilled /></el-icon>
                        <div>{{ item.address }}</div>
                    </div>
                </div>
                <!-- <div class="starS pAbsolute flex aCenter" @click.stop="collectTap(index,item.isStar)">
                    <el-icon style="font-size: 20px;" color="#409EFF" v-show="!item.isStar"><Star /></el-icon>
                    <el-icon style="font-size: 20px;" color="#409EFF" v-show="item.isStar"><StarFilled /></el-icon>
                    <div class="zt">
                        collect
                    </div>
                </div> -->
                <div class="goBuy pAbsolute flex aCenter">
                    <div class="flex aCenter firstDf">
                        <div>
                           click room reservation
                        </div>
                        <div class="payOne"></div>
                        <!-- <div class="payTwo"></div> -->
                    </div>
                    <div class="fWeight flex jgDf aCenter">
                        <span class="priceWeight">
                            {{item.price}}
                        </span>
                        <div>
                            rise
                        </div>
                    </div>
                    <el-icon color="#409EFF"><ArrowRight /></el-icon>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts" >
    import {options,roomNumList} from '@/utils/dictionaries.js';
    import router from '@/router'
    import { reactive, ref } from 'vue';
    const dateInOut=ref('') as any;
    const guestCount=ref(1) as any;
    const city=ref('Shanghai') as any;
    const rateVal=ref(0)
    const travelList=reactive([
        {
            title:'Shanghai Jinjiang Metropolo Classic East Nanjing Road Hotel',
            chinaT:'Jin Jiang Capital Classic Nanjing East Road Bund Hotel, Shanghai',
            img:new URL(`@/assets/img/shanghaiDetail/first.jpeg`, import.meta.url).href,
            fenshu:'8.8分',
            desc:'Stay in a historic building with a river view',
            address:"address: 98 East Nanjing Road",
            isStar:false,
            price:'123'
        },
        {
            title:'Fairmont Peace Hote',
            chinaT:'Shanghai Peace Hotel',
            img:new URL(`@/assets/img/shanghaiDetail/second.jpeg`, import.meta.url).href,
            fenshu:'8.8分',
            desc:'Living on the Bund, dreaming back to the Republic of China',
            address:"address: No. 9, Lane 115, Tai 'an Road",
            isStar:false,
            price:'331'
        },
        {
            title:'Atour Hotel (Shanghai The Bund, Old Wharf)',
            chinaT:'Aldo Hotel Shanghai Bund Old Quay',
            img:new URL(`@/assets/img/shanghaiDetail/third.jpeg`, import.meta.url).href,
            fenshu:'8.8分',
            desc:'Stay in a historic building with a river view',
            address:'address:200 South Shanxi Road',
            isStar:false,
            price:'431'
        },
    ])
    const jumpPathDetail=(index:any)=>{
        if(index==0){
            router.push('hotel/detail')
            return;
        }
        router.push('/HotelOptionEmpty?id='+index)
    }
    const collectTap=(index:any,isStar:any)=>{
        travelList[index].isStar=!isStar;
        if(travelList[index].isStar){
            ElMessage({
                message: 'Successful collection.',
                type: 'success',
                duration:1000
            })
        }else{
            ElMessage({
                message: 'Uncollect successfully.',
                type: 'success',
                duration:1000
            })
        }
    }
    const searchPrice=()=>{
    }
</script>

<style lang="less" scoped>
    .hotelDetail{
        width:1000px;
        margin:0 auto;
    }
    .info-item{
        margin: 20px 20px 20px 0;
    }
    .starS{
        top:0;
        right:0;
        font-size: 12px;
        color:#409EFF;
        cursor: pointer;
        .zt{
            margin-left: 5px;
        }
    }
    .goBuy{
        bottom:30px ;
        right:10px;
        color:#333;
        border-bottom: 1px solid #e5e5e5;
        padding-bottom: 5px;
        cursor: pointer;
        &:hover{
            background-color: #fafafa;
        }
        .firstDf{
            font-size: 14px;
            color: #333;
            font-weight: normal;
            border-right: 1px solid #e5e5e5;
            padding-right: 30px;
            .payOne{
                background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat -250px 0;
                margin: 0 0 0 4px;
                width: 14px;
                height: 14px;
            }
            .payTwo{
                background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat -250px 0;
                background-position: -250px -15px;
                margin: 0 0 0 4px;
                width: 14px;
                height: 14px;
            }
        }
        .jgDf{
            font-size: 13px;
            margin-left: 10px;
        }
        .priceWeight{
            display: block;
            padding-right:2px;
            font-size: 16px;
            color: #409EFF;
        }
    }
    .gl{
        color:#666;

        >div:nth-child(1){
            font-size: 18px;
            font-weight: bold;
        }
        >div:nth-child(2){
            font-size: 14px;
        }
    }
    .rtBox{
        margin-right: 40px;
        font-size: 14px;
        color: #666;
    }
    .jjT{
        font-size: 14px;
        color: #666;
    }
    .hotel-rate{
        margin-left: 10px;
        display: inline-block;
        height: 13px;
        width: 70px;
        background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat -150px -230px;
        overflow: hidden;
        vertical-align: -2px;

        &.rate3 {
            width: 42px;
        }
        &.rate4 {
            width: 56px;
        }
    }
    .travelList{
        .travelBox{
            border-bottom:#999 solid 1px;
            border-bottom: 1px solid #e5e5e5;
            padding-bottom: 26px;
            margin-bottom: 26px;
            cursor: pointer;
        }
        img{
            width:330px;
            height: 240px;
            margin-right: 20px;
        }
        .title{
            font-size:18px;
            color:#666;
            margin-bottom: 10px;
        }
        .chinaT{
            font-size: 14px;
            color: #999;
        }
        .desc{
            font-size: 14px;

            margin-top: 20px;
        }

        .radiusB{
            margin: 15px 20px 0 0;
            width: 65px;
            height: 65px;
            padding-top: 15px;
            background: url(./../assets/img/hotel/hotel-detail-icon8.png) no-repeat 0 0;
            text-align: center;
            color: #999;
            font-size: 12px;
            line-height: 16px;
            background-position: 0 -70px;
            em{
                font-style: normal;
                font-size: 14px;
                color: #ff8a00;
            }
            strong{
                font-size: 14px;
                color: #666;
                font-weight: normal;
                margin-top: 5px;
            }
        }
        .address{
            margin-top: 20px;
            font-size: 14px;
            color:#999;
        }
    }
</style>